<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header">
        <span class="info-title">商品编号：</span>
        <span class="info-content">{{ productInfo.productId }}</span>
        <span class="info-title">商品名称：</span>
        <span class="info-content">{{ productInfo.productName }}</span>
        <el-button style="padding: 3px 0; float: right" type="text" @click="goBack()"><i class="el-icon-arrow-left" />返回商品列表</el-button>
      </div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        max-height="400"
        highlight-current-row
        style="width: 100%;"
        :row-style="{height:'32px'}"
      >
        <el-table-column label="规格编号" align="center" width="120" fixed>
          <template slot-scope="{row}">
            <span>{{ row.itemId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.itemName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="属性" align="center">
          <template slot-scope="{row}">
            <span>{{ row.itemAttrs }}</span>
          </template>
        </el-table-column>
<!--        <el-table-column label="详情描述" align="center">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ row.specification }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="重量" width="100px" align="center">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ row.weight }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="消耗积分" align="center">
          <template slot-scope="{row}">
            <span>{{ row.originPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存" width="120px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.itemStock }}</span>
          </template>
        </el-table-column>
        <el-table-column label="销量" width="120px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.itemSales }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80px" align="center">
          <template slot-scope="{row}">
            <el-tag v-if="row.itemUpper===1" type="success" size="mini">上架中</el-tag>
            <el-tag v-else type="info" size="mini">已下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="修改日期" align="center" width="180px">
          <template slot-scope="{row}">
            <span>{{ row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250px" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button v-if="row.itemUpper===0" size="mini" type="success" @click="toggleUpperOn(row)">
              上架
            </el-button>
            <el-button v-else size="mini" type="info" @click="toggleUpperOff(row)">
              下架
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row.itemId)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="filter-container">
        <el-button v-waves class="filter-item" style="margin-top: 20px;" type="success" icon="el-icon-edit" @click="handleCreate">
          新增规格
        </el-button>
      </div>
    </el-card>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="35%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="规格名称" prop="itemName">
          <el-input v-model="temp.itemName"/>
        </el-form-item>
        <el-form-item label="属性" prop="itemAttrs">
          <el-input v-model="temp.itemAttrs"/>
        </el-form-item>
<!--        <el-form-item label="详情描述" prop="specification">-->
<!--          <el-input v-model="temp.specification"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="重量" prop="weight">-->
<!--          <el-input v-model="temp.weight"/>-->
<!--        </el-form-item>-->
        <el-form-item label="消耗积分" prop="originPrice">
          <el-input v-model="temp.originPrice" />
        </el-form-item>
        <el-form-item label="库存" prop="itemStock">
          <el-input v-model="temp.itemStock" />
        </el-form-item>
        <el-form-item label="是否上架" prop="itemUpper">
          <el-switch v-model="temp.itemUpper" :active-value="1" :inactive-value="0" active-color="#13ce66" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { removeItem, saveItem, showItemList, toggleItemUpper, getProduct } from '@/api/product'
import waves from '@/directive/waves' // waves directive
import { roundPrice } from '@/utils/common'
import { isIntegerNature, isTwoDecimal } from '@/utils/validate'

export default {
  name: 'Items3',
  directives: { waves },
  data() {
    return {
      productId: 0,
      productInfo: {},
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      temp: {
        itemId: undefined,
        productId: undefined,
        itemName: '',
        itemAttrs: '',
        specification: '',
        weight: '',
        originPrice: '',
        itemStock: '',
        itemUpper: '',
        version: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        itemName: [{ required: true, message: '请填写规格名称', trigger: 'blur' }],
        itemAttrs: [{ required: true, message: '请填写属性', trigger: 'blur' }],
        // specification: [{ required: true, message: '请填写详情描述', trigger: 'blur' }],
        // weight: [{ required: true, message: '请填写重量', trigger: 'blur' }],
        originPrice: [{ required: true, message: '请填写消耗积分', trigger: 'blur' }, { validator: isTwoDecimal, trigger: 'blur' }],
        itemStock: [{ required: true, message: '请填写库存', trigger: 'blur' }, { validator: isIntegerNature, trigger: 'blur' }],
        itemUpper: [{ required: true, message: '请选择是否上架', trigger: 'change' }]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.productId = this.$route.params.id
      this.showItemList()
      this.getProductInfo()
    },
    showItemList() {
      this.listLoading = true
      showItemList(this.productId).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    getProductInfo() {
      getProduct({ productId: this.productId }).then(response => {
        this.productInfo = response.data
      })
    },
    resetDialog() {
      this.temp = {
        itemId: undefined,
        productId: undefined,
        itemName: '',
        itemAttrs: '',
        specification: '',
        weight: '',
        originPrice: '',
        itemStock: '',
        itemUpper: '',
        version: ''
      }
    },
    handleCreate() {
      this.resetDialog()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, this.temp)
          data.productId = this.productId
          saveItem(data).then(() => {
            this.showItemList()
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '新增规格成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, this.temp)
          data.productId = this.productId
          saveItem(data).then(() => {
            this.showItemList()
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '编辑规格成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    toggleUpperOn(row) {
      const data = { 'itemId': row.itemId, 'itemUpper': row.itemUpper }
      toggleItemUpper(data).then(() => {
        this.showItemList()
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: '上架细分规格成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    toggleUpperOff(row) {
      const data = { 'itemId': row.itemId, 'itemUpper': row.itemUpper }
      toggleItemUpper(data).then(() => {
        this.showItemList()
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: '下架细分规格成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDelete(itemId) {
      this.$confirm('此操作将删除该商品细分规格且不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeItem(itemId).then(() => {
          this.showItemList()
          this.dialogFormVisible = false
          this.$notify({
            title: 'Success',
            message: '删除细分规格成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    goBack() {
      this.$router.push({
        name: 'Product3'
      })
    },
    roundPrice
  }
}
</script>

<style lang="less" scoped>
  .info-title {
    font-weight: bolder;
  }
  .info-content {
    margin-right: 30px;
  }
</style>
